<template>
	<div id="contentBox">
		<div class="searchBox">
			<el-form :inline="true"  ref="searchForm"  :model="searchForm" label-width="96px" >
				<el-form-item label="操作日期起" prop="startDate" >
				    <el-date-picker :editable="false"   
				      @change="startDateSeach"
				      v-model="searchForm.startDate"
				      type="date"
				      placeholder="选择日期"
				      :picker-options="startDateOpt"
				      
				      >
				    </el-date-picker>
				</el-form-item>
				<el-form-item label="操作日期止" prop="endDate" >
				    <el-date-picker :editable="false"  
				      @change="endDateSeach"
				      v-model="searchForm.endDate"
				      type="date"
				      placeholder="选择日期"
				      :picker-options="endDateOpt"
				      >
				    </el-date-picker>
				</el-form-item>
				<el-form-item label="操作人" prop="userName" style="    margin-bottom: 0;" >
				    <el-input type="tel" v-model="searchForm.userName" placeholder="请输入搜索内容..." @input.native="debounceSeach" ></el-input >
				</el-form-item>
				
	            <el-form-item label="是否成功" prop="status"  >
				      <el-select   @change="debounceSeach" v-model="searchForm.status" filterable placeholder="请选择是否成功">
				      	<el-option value="" label="全部">全部</el-option>
				      	<el-option value="1" label="是">是</el-option>
				      	<el-option value="0" label="否">否</el-option>
					  </el-select>
				</el-form-item>

				<el-form-item label="系统名称" prop="requestUserHostInfo"  >
				    <el-input v-model="searchForm.requestUserHostInfo" placeholder="请输入搜索内容..." @input.native="debounceSeach"></el-input >
				</el-form-item>
				<el-form-item label="操作内容" prop="operationName"  >
				    <el-input v-model="searchForm.operationName" placeholder="请输入搜索内容..." @input.native="debounceSeach"></el-input >
				</el-form-item>		
				<el-form-item label="订单号" prop="orderNumber"  >
				    <el-input v-model="searchForm.orderNumber" placeholder="请输入搜索内容..." @input.native="debounceSeach"></el-input >
				</el-form-item>		
				<el-form-item style="text-align:left; margin-bottom: 10px;">
				    <el-button @click="resetSearchForm('searchForm')">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div id="tableBox" style="margin:25px 25px 0" >
			<el-table :data="tableData.data" border  >
				<el-table-column type="expand">
			      <template scope="props" >
			        <el-form label-position="left" inline class="demo-table-expand" v-if="props.row.parameter">
			          <div v-for="(item,index) in JSON.parse(props.row.parameter)[0]">
			          	  <el-form-item :label="index" >
				            <span >{{ item }}</span>
				          </el-form-item>
			          </div>
			        </el-form>
			        <span v-else>暂无子节点</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="操作人" width="100">
			      <template scope="scope">
			        <span >{{ scope.row.userName }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="操作时间" width="160">
			      <template scope="scope">
			        <span >{{ scope.row.createDate|parseTime }}</span>
			      </template>
			    </el-table-column>
			   <el-table-column label="模块名称" width="120">
			     <template scope="scope">
			       <span >{{ scope.row.modelName }}</span>
			     </template>
			    </el-table-column> 
			    <el-table-column label="操作内容" min-width="200">
			      <template scope="scope">
			        <span >{{ scope.row.operationName }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="是否成功" width="100">
			      <template scope="scope">
			        <span >{{ scope.row.status=='1'?"成功":"失败" }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="IP地址/系统名称/终端" min-width="200">
			      <template scope="scope">
			      	<span v-if="scope.row.requestUserHostInfo">{{JSON.parse(scope.row.requestUserHostInfo.replace('"'/g,"'")).join(' / ')}}</span>
			      </template>
			    </el-table-column>
			</el-table>
		</div>
        <div class="block" style="text-align: center;margin-top: 15px;position:relative;">
		    <pagination v-on:refreshSeachData="seachData()"  :tableData="tableData" :searchForm="searchForm"></pagination>
		</div>
	</div>
	
</template>
<script src="./index.js"></script>
<style scoped lang="stylus">
	@import "./index.styl"
	#tableBox .el-form-item{margin-bottom:0;}
</style>